<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>便签</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <link rel="stylesheet" href="../common/style/xiaolai.css" />
    <style>
      :root{
        --padding-vw: 5vw;
        --padding-px: 20px;
      }

      html,
      body{
        border-radius: 3px;
      }

     
      .notes-view{
        width: 100%;
        height: 100%;
        background-color: #9cb57c;
        padding: var(--padding-vw);
      }

     

      .notes-edit-box{
        width: 100%;
        height: 100%;
        overflow-y: auto;
        border-radius: 3px;
        background-color: #fff;
        padding: calc(var(--padding-vw) + 5px) 0 0 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

      .notes-decorate{
        position: fixed;
        left: var(--padding-vw);
        top: var(--padding-vw);
        width: calc(100vw - var(--padding-vw) * 2);
        height: calc(var(--padding-vw) + 3px);
        padding: 0 var(--padding-vw);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
      }

      .notes-move{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height:  calc(var(--padding-vw) * 2 + 3px);
        -webkit-app-region: drag;
        z-index: 1;
      }

      .notes-item{
        width: 3vw;
        height: 3vw;
        background-color: #9cb57c;
        border-radius: 50%;
      }

      .notes-edit{
        width: 100%;
        min-height: 100%;
        outline: none;
        font-size: 14px;
        line-height: 20px;
        word-break: break-all;
        text-align: justify;
        font-family:'Xiaolai SC';
        font-weight: 500;
        background-image: url('./line.svg');
        background-position: 0 10px;
        padding: 0 5px;
      }

      .notes-edit:empty:before{
        content: attr(data-placeholder);
        color: #999;
        display: block; 
      }

      .notes-edit:focus:before,
      .notes-edit:not(:empty):before {
        content: none;
      }
      
      @media screen and (min-width: 520px) {
        .notes-view{
          position: relative;
          width: 100%;
          height: 100%;
          background-color: #9cb57c;
          padding: var(--padding-px);
        }

        .notes-edit-box{
          padding: calc(var(--padding-px) + 5px) 0 0 0;
        }

        .notes-decorate{
          width: calc(100% - var(--padding-px) * 2);
          height: calc(var(--padding-px) + 3px);
          left: var(--padding-px);
          top: var(--padding-px);
        }

        .notes-move{
          height:  calc(var(--padding-px) * 2 + 3px);
        }


        .notes-item{
          width: 15.6px;
          height: 15.6px;
          background-color: #9cb57c;
          border-radius: 50%;
        }

        
      }
      
    </style>
  </head>
  <body>
    <div class="notes-view">
      <div class="notes-edit-box">
        <div class="notes-move"></div>
        <div class="notes-decorate">
          <div class="notes-item"></div>
          <div class="notes-item"></div>
          <div class="notes-item"></div>
          <div class="notes-item"></div>
          <div class="notes-item"></div>
          <div class="notes-item"></div>
          <div class="notes-item"></div>
          <div class="notes-item"></div>
          <div class="notes-item"></div>
          <div class="notes-item"></div>
        </div>
        <div class="notes-edit" data-placeholder="请输入内容..." contenteditable="plaintext-only"></div>
      </div>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module">
    import { debounce } from '../common/utils/utils.js'
    const notesEditEl = document.querySelector('.notes-edit');

    let data = {
      textarea: '',
    };


    if(window.ipcRenderer){

      window.ipcRenderer.on('init', (event, res)=>{
        notesEditEl.innerText = res.textarea ? res.textarea : '';
        data.textarea = res.textarea ? res.textarea : '';
      })
    }

    notesEditEl.addEventListener('input', debounce((event)=>{
      data.textarea = event.target.innerText;
      if(window.sendSaveData){
        window.sendSaveData(data);
      }
    },1000))




    window.getData = ()=>data


  </script>
</html>
